<script setup lang="ts">
import { reactive, ref, watch } from "vue";

const count = ref(0);
const user = reactive({
    name: "tom",
    info: {
        gender: "男",
        age: 18,
    },
});

// 监听多个响应式数据 - watch([数据1, 数据2, ...], 改变后回调函数)
watch([count, user], () => {
    console.log("Count数据改变了->" + count.value);
});

// 监听对象中属性的变化
watch(() => user.info.age, (newValue, oldValue) => {
    console.log(`旧值 ${oldValue} -> 新增 ${newValue}`);
})

// 2s改变数据
setTimeout(() => {
    count.value++;
}, 1000);

// 2s改变数据
setInterval(() => {
    user.info.age++;
}, 2000);

// ---------- 监听整个对象 ----------
watch(
    () => user.info,
    (newValue) => {
        console.log('监听整个对象');
        console.log(newValue);
    },
    {
        // 深度监听
        deep: true,
        // 一进入就执行一次回调函数
        immediate: true
    }
)

</script>

<template>
    <p>计数器：{{ count }}</p>
    <p>
        姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
    </p>
</template>